<template>
	<navbar title="七天速成" :isBack="true"></navbar>
	<u-swiper :list="Info.images" mode="number" indicator-pos="bottomRight" height="376">

	</u-swiper>
	<view class="page">
		<view class="" style="padding: 30rpx;background-color: white;">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="font-size: 36rpx;font-weight: bold;">
					{{Info.name}}
				</view>
				<view class="">
					<button class="title-right" style="background-color: white;padding: 0;" open-type="share">
						<view class="image">
							<image src="/static/image/share.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
						</view>
						<view class="text">
							分享
						</view>
					</button>
				</view>
			</view>
			<view class="" style="margin-top: 15rpx;color: #787878;">
				{{Info.memo}}
			</view>
			<view class="" style="margin-top: 15rpx;font-size: 40rpx;color: #F00505;font-weight: bold;">
				<span style="font-size: 20rpx;">¥</span>{{itemInfo.price}}
			</view>
		</view>
		<view class="" style="margin-top: 20rpx;padding: 25rpx;background-color: white;">
			<view class="" style="display: flex;align-items: center;">
				<view class="" style="height: 28rpx;width: 6rpx;background-color: #3F4780;">

				</view>
				<view class="" style="margin-left: 20rpx;font-weight: bold;font-size: 36rpx;">
					排期
				</view>
			</view>
			<view class=""
				style="margin-top: 20rpx;display: flex;overflow: auto;">
				<view :class="item.active == 1 ? 'active-border':'default-border'" @tap="clickItem(item,index)"
					v-for="(item,index) in Info.stage"
					style="min-width: 212rpx;height: 200rpx;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;overflow: hidden;margin-right: 20rpx;">
					<view :class="item.active == 1 ? 'active':'default'"
						style="height: 72rpx;border-radius: 20rpx 20rpx 0 0;display: flex;justify-content: center;align-items: center;font-size: 24rpx;width: 212rpx;">
						{{item.name}}
					</view>
					<view :class="item.active == 1 ? 'active-text':'default-text'"
						style="margin-top: 20rpx;font-size: 24rpx;">
						<span v-if="item.status == 0">未开始</span>
						<span v-if="item.status == 1">报名中</span>
						<span v-if="item.status == 2">报名已结束</span>
						<span v-if="item.status == 3">上课中</span>
						<span v-if="item.status == 4">已结束</span>
					</view>
					<view class="" style="margin-top: 20rpx;font-size: 28rpx;">
						<span style="font-size: 24rpx;">¥</span>{{item.price}}
					</view>
				</view>
			</view>
			<!-- 报名人数 -->
			<!-- <view class="" style="margin-top: 36rpx;display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="position: relative;display: flex;height: 60rpx;">
					<view class="" v-for="(item,index) in itemInfo.avatar"
						style="width: 60rpx;height: 60rpx;border-radius: 30rpx;position: absolute;"
						:style="'left:' + index * 20 + 'px'">
						<image :src="item" mode=""
							style="width: 60rpx;height: 60rpx;border-radius: 30rpx;position: absolute;"></image>
					</view>
				</view>
				<view class="" style="display: flex;min-width: 100rpx;" @click="fillList">
					<view class="" style="margin-right: 20rpx;">
						<span v-if="itemInfo.enroll_num > 0">已报名{{itemInfo.enroll_num}}人</span>
						<span v-else>暂无报名</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view> -->
			<!-- <view class="" style="margin-top: 36rpx;border-bottom: 1rpx solid #F5F6F8;">

			</view> -->
			<!-- <view class="" @click="place"
				style="margin-top: 40rpx;display: flex;justify-content: space-between;align-items: center;">
				<view class="" style="display: flex;font-size: 32rpx;">
					<view class="" style="">
						地点
					</view>
					<view class="" style="margin-left: 60rpx;">
						{{Info.province}}{{Info.city}}{{Info.address}}
					</view>
				</view>
				<image src="/static/address/place1.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
			</view> -->
			<!-- <view class="" style="margin-top: 36rpx;border-bottom: 1rpx solid #F5F6F8;">

			</view> -->
		
		</view>
		
		<view class="" style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;background-color: white;padding: 25rpx;">
			<view class="" style="position: relative;display: flex;height: 60rpx;">
				<view class="" v-for="(item,index) in itemInfo.avatar"
					style="width: 60rpx;height: 60rpx;border-radius: 30rpx;position: absolute;"
					:style="'left:' + index * 20 + 'px'">
					<image :src="item" mode=""
						style="width: 60rpx;height: 60rpx;border-radius: 30rpx;position: absolute;"></image>
				</view>
			</view>
			<view class="" style="display: flex;min-width: 100rpx;" @click="fillList">
				<view class="" style="margin-right: 20rpx;">
					<span v-if="itemInfo.enroll_num > 0">已报名{{itemInfo.enroll_num}}人</span>
					<span v-else>暂无报名</span>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		
		<!-- 地点 -->
		<view class="" @click="place"
			style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;padding: 25rpx;background-color: white;">
			<view class="" style="display: flex;font-size: 32rpx;">
				<view class="" style="">
					地点
				</view>
				<view class="" style="margin-left: 60rpx;">
					{{Info.province}}{{Info.city}}{{Info.address}}
				</view>
			</view>
			<image src="/static/address/place1.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
		</view>
		<!-- 详情 -->
		<view class=""
			style="display: flex;flex-direction: column;margin-top: 20rpx;background-color: white;width: 100%;padding: 25rpx;">
			<view class="" style="display: flex;flex-direction: column;width: 72rpx;align-items: center;">
				<view class="" style="font-size: 36rpx;font-weight: bold;">
					详情
				</view>
				<view class="" style="width: 28rpx;height: 6rpx;background-color: #3F4780;margin-top: 10rpx;">
						 
				</view>
			</view>
		</view>
		<view class="" v-html="Info.detail" style="background-color: white;padding: 0 25rpx;">
		
		</view>
	</view>
	<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
		<view class=""
			style="width: 100%;height: 100rpx;display: flex;justify-content: center;align-items: center;color: white;font-size: 32rpx;">
			<button open-type="contact" style="background-color: white;padding: 0;margin-top: 10rpx;">
				<view class=""
					style="display: flex;flex-direction: column;align-items: center;height: 100rpx;justify-content: center;padding: 0 20rpx;margin-left: 40rpx;">
					<image src="/static/image/kf.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
					<view class="" style="font-size: 24rpx;color: #2C2C2C;white-space: nowrap;">
						客服
					</view>
				</view>
			</button>

			<view class="" @click="submit" v-if="itemInfo.status == 1 && itemInfo.is_enroll == 0"
				style="width: 100%;height: 100rpx;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);display: flex;justify-content: center;align-items: center;color: white;margin-left: 50rpx;font-size: 32rpx;">
				立即报名
			</view>
			<view class="" @click="pay" v-if="itemInfo.status == 1 && itemInfo.is_enroll == 1"
				style="width: 100%;height: 100rpx;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);display: flex;justify-content: center;align-items: center;color: white;margin-left: 50rpx;font-size: 32rpx;">
				去支付
			</view>
			<view class="" v-if="itemInfo.is_enroll == 2"
				style="width: 100%;height: 100rpx;background: #ABABAB;display: flex;justify-content: center;align-items: center;color: white;margin-left: 50rpx;font-size: 32rpx;">
				已报名
			</view>
			<view class=""
				v-if="itemInfo.status == 0  || itemInfo.status == 2 || itemInfo.status == 3 || itemInfo.status == 4"
				style="width: 100%;height: 100rpx;background: #ABABAB;display: flex;justify-content: center;align-items: center;color: white;margin-left: 40rpx;font-size: 32rpx;">
				<span v-if="itemInfo.status == 0">报名未开始</span>
				<span v-if="itemInfo.status == 2">报名已结束</span>
				<span v-if="itemInfo.status == 3">上课中</span>
				<span v-if="itemInfo.status == 4">已结束</span>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	import { speed } from '@/service/api/speed'
	const list = ref([1, 2, 3]);
	const textList = ref([
		{
			title: '2024-01期',
			state: 0,
			price: '99.00'
		},

		{
			title: '2024-02期',
			state: 1,
			price: '99.00'
		},
		{
			title: '2024-02期',
			state: 0,
			price: '99.00'
		},

	])
	const Info = reactive({
		id: "",
		name: "",
		memo: "",
		images: [],
		province: "",
		city: "",
		crea: "",
		address: "",
		latitude: "",
		longitude: "",
		detail: "",
		state: "",
		stage: [],
	});
	const itemInfo = reactive({
		avatar: [],
		active: "",
		enroll_num: "",
		form: [],
		id: "",
		is_enroll: "0",
		name: "",
		price: "0.00",
		start_date: "",
		state: "",
		status: "",
		enroll_id: ""
	})
	const imageList = ref([
		1, 2, 3
	])
	onShow(() => {
		getData()
	})
	//报名记录
	const fillList = () => {
		if (itemInfo.enroll_num) {

			tools.navTo('/pagesB/speededUp/fillList?id=' + itemInfo.id);
		}
	}
	//去支付
	const pay = () => {
		if (itemInfo.enroll_id) {
			tools.navTo('/pagesB/order/pay?id=' + itemInfo.enroll_id + '&type=1');
		} else {
			tools.showToast('没有订单ID')
		}
	}
	const getData = async () => {
		uni.showLoading({
			title: '加载中'
		})
		const res = await speed('');
		for (let i in Info) {
			Info[i] = res.msg[i]
		}

		let item = Info.stage.find(function (item, index, arr) {
			if (item.status == 1) {
				return index;
			}

		})
		if (item) {
			item['active'] = 1;
			for (let i in itemInfo) {
				itemInfo[i] = item[i]
			}
		} else if(Info.stage.length > 0) {
			Info.stage[0]['active'] = 1;
			for (let i in itemInfo) {
				itemInfo[i] = Info.stage[0][i]
			}
		}
	}
	const submit = () => {
		uni.navigateTo({
			url: '/pagesB/speededUp/fill?id=' + itemInfo.id + '&type=0'
		})

	}
	//点击排期
	const clickItem = (item : any, index : number) => {
		Info.stage.forEach((it : any, i : number) => {
			if (index == i) {
				it['active'] = 1;
			} else {
				it['active'] = 0;
			}
		})

		for (let i in itemInfo) {
			itemInfo[i] = item[i]
		}
		console.log(itemInfo);
		// textList.value.forEach((it : any, i : number) => {
		// 	if (index == i) {
		// 		it.state = 1;
		// 	} else {
		// 		it.state = 0;
		// 	}
		// })

	}
	//打开地图
	const place = () => {
		console.log(Info);

		let param = {
			scale: 1,
			longitude: Number(Info.longitude),
			latitude: Number(Info.latitude)
		}
		// tools.openLocation(param);
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		background-color: #F8F8F9;

		padding-bottom: 100rpx;
	}

	.default {
		background-color: #F9F9F9;
	}

	.default-text {
		color: #9A9A9A;
	}

	.default-border {
		border: 1rpx solid #DBDBDB;
	}

	.active {
		background-color: #576DC2;
		color: white;
	}

	.active-text {
		color: #5062A7;
	}

	.active-border {
		border: 1rpx solid #576DC2;
	}

	.title-right {
		display: flex;
		align-items: center;

		.image {
			width: 36rpx;
			height: 36rpx;
		}

		.text {
			font-size: 28rpx;
			margin-left: 5rpx;
		}
	}
</style>